<template>
  <div class="setting-playrules full-height full-width">
    <!-- 查询数据区域开始 -->
    <div class="setting-playrules-container row">
      
      <div class="col-2.5">
        <data-source-code
          title="玩法数据源"
          :show_all="false"
          :not_pa="2"
          @change="queryform_form_dataSourceCode_change"
        />
      </div>
      <div class="col-2.5 flex q-px-md items-center">
        <q-select
          filled
          rounded
          class="w150x"
          color="panda-text-light"
          bg-color="panda-light-light"
          v-model="queryform_form.matchStatus"
          hide-bottom-space
          :options="compute_play_status_constant()"
          emit-value
          map-options
          option-value="id"
          option-label="value"
          dense
          options-dense
          popup-content-class="bg-panda-light-light text-panda-text-light"
        >
          <template v-slot:before>
            <span class="text-panda-text-dark">玩法状态</span>
          </template>
        </q-select>
        <q-select
          filled
          rounded
          class="w150x q-ml-md"
          color="panda-text-light"
          bg-color="panda-light-light"
          v-model="queryform_form.matchStatus"
          hide-bottom-space
          :options="compute_play_status_constant()"
          emit-value
          map-options
          option-value="id"
          option-label="value"
          dense
          options-dense
          popup-content-class="bg-panda-light-light text-panda-text-light"
        >
          <template v-slot:before>
            <span class="text-panda-text-dark">多盘口玩法</span>
          </template>
        </q-select>
      </div>
      <!-- 查询数据区域结束 -->
    </div>
    <!-- 正常列表格展示 -->
    <table-loading :loading="tabledata_loading" />
    <q-table
      :title="tabletittle"
      :data="tabledata"
      :columns="tablecolumns"
      dense
      row-key="name"
      class="bg-panda-base-dark text-panda-text-light panda-table panda-sticky-header-table full-width"
      table-header-class="panda-table"
      :separator="separator"
      :pagination.sync="pagination"
      :no-data-label="data_label"
      :table-style="`max-height: ${scroll_area_height+30}px;`"
    >
      <template v-slot:body="props">
        <tablerow
          :props="props"
          :is_top_slot="0"
          :tablecolumns="tablecolumns"
          :table_col_leagueName_color_map="table_col_leagueName_color_map"
          @init_tabledata="init_tabledata"
          @table_item_click_expanded="table_item_click_expanded"
          @toggle_select="selected_table_items_change"
          :label_item="label_item"
        ></tablerow>
      </template>
      <template v-slot:bottom>
        <panda-pagination
          :total="totalall"
          :tabledata_can_request="tabledata_can_request"
          :queryform_form_changed="queryform_form_changed"
          @handle_currentPage_change="handle_currentPage_change"
          @init_tabledata="init_tabledata"
        ></panda-pagination>
      </template>
    </q-table>
  </div>
</template>

<script>

import dataSourceCode from "src/components/query/dataSourceCode.vue";
import tablerow from "src/pages/setting/playrules/component/tablerow.vue";
import tableLoading from "src/components/table/tableLoading.vue";
import { tablecolumns_config } from "src/pages/setting/playrules/config/config.js";
import pandaPagination from "src/components/pagination/pagination.vue";
import { api_match } from "src/api/index.js";

import matchManage from "src/mixins/pages/match/matchManage.js"
import mixins from "src/mixins/index.js";

export default {
  mixins: [...mixins, matchManage],
  components: {
    dataSourceCode,
    tablerow,
    tableLoading,
    pandaPagination
  },
  data() {
    return {
      queryform_form: {},
      queryform_module: {},
      tablecolumns: tablecolumns_config
    };
  },
  methods: {
    // 初始化数据
    init_tabledata() {
      /**
       * 这里 暂时不管 全局 的 数据商的 接口 的先后问题  正常情况下 会先返回
       * 后期如果存在问题    加上前置判断和监听
       */
      this.init_tabledata_before();
      let params = this.compute_init_tabledata_params();
      params = this.delete_empty_property_with_exclude(params);
      api_match
        .post_matchManager_queryMatch(params)
        .then(res => {
          this.init_tabledata_after();
          let currentPage =
            this.find_value_in_obj_bypath(res, "res.data.data.page") * 1 || 1;
          if (this.currentPage == currentPage) {
            let arr =
              this.find_value_in_obj_bypath(res, "res.data.data.records") || [];
            this.tabledata = this.rebuild_tabledata_to_needed(arr);
            if (arr[0]) {
              this.table_item_click(arr[0]);
            }
            this.currentPage = currentPage;
            this.request_currentPage = currentPage;
            this.totalall =
              this.find_value_in_obj_bypath(res, "res.data.data.total") * 1 ||
              0;
          } else {
            this.init_tabledata();
          }
        });
    },
    compute_init_tabledata_params() {
      let params = {};
      params = {
        dataSourceCode: this.queryform_form.dataSourceCode,
        // id: 0,   //编辑页面 单条查询 回显 需要
        leagueLevel: this.queryform_form.leagueLevel,
        matchStatus: this.queryform_form.matchStatus,
        // oddStatusFirst: "",
        // oddStatusSecond: 0,
        // onlyStandard: 0,  编辑页面左侧需要 全部是标准的
        page: this.currentPage,
        size: this.pageSize,
        startTimeEnd: this.queryform_form.startTimeEnd,
        startTimeFrom: this.queryform_form.startTimeFrom
      };
      this.resove_queryform_form_oddStatus(params);
      console.log(" 列表 查询参数");
      console.log(params);
      if (this.queryform_form.dataSourceCode_all) {
        delete params.dataSourceCode;
      }
      return params;
    },
        resove_queryform_form_oddStatus(params) {
      let oddStatus = this.queryform_form.oddStatus;
      console.log(oddStatus);
      if (!oddStatus) {
        params.oddStatusFirst = "";
        params.oddStatusSecond = "";
      } else {
        params.oddStatusFirst = oddStatus.source;
        params.oddStatusSecond = oddStatus.open;
      }
    },
    // 获取查询数据源的值
    queryform_form_dataSourceCode_change(val) {
      this.queryform_form.dataSourceCode = val.dataSourceCode;
    },
    compute_play_status_constant() {
      return ["sdf", "sd"];
    },
    scroll_area_height() {}
  },
  created() {
    this.tablecolumns = this.rebuild_tablecolumns_config(this.tablecolumns);
  }
};
</script>